<template>
  <el-dialog v-model="state.visible" :width="335" class="robot-dialog">
    <template #header>智能客服是否解决了您的问题？ </template>
    <div class="robot-rate-cn" style="">
      <el-radio-group v-model="state.value" class="radio-btn-cn">
        <el-radio-button :value="1">
          <div class="rate-item flex-c-c">
            <img :src="robotRate1" alt="" />
            <span>已解决</span>
          </div>
        </el-radio-button>
        <el-radio-button :value="0">
          <div class="rate-item flex-c-c">
            <img :src="robotRate0" alt="" />
            <span>未解决</span>
          </div>
        </el-radio-button>
      </el-radio-group>
      <el-button style="width: 100%;
    border-radius: 22px;
    height: 42px;" type="primary" @click="commit">提交评价</el-button>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import robotRate0 from '@/assets/images/robot_rate0.png';
import robotRate1 from '@/assets/images/robot_rate1.png';

const emits = defineEmits(['commit']);

const state = reactive({
  visible: false,
  value: 1
});
function commit() {
  state.visible = false;
  emits('commit', { score: state.value });
}
function show() {
  state.visible = true;
}
defineExpose({
  show
});
</script>
<style>
.robot-dialog {
  border-radius: 16px;
  .el-dialog__header {
    border-bottom: 1px solid #e7e7e7;
    font-weight: 600;
    color: black;
    font-size: 15px;
  }
  .el-radio-button.is-active {
    .el-radio-button__inner {
      background: #eaf1ff !important;
      color: #2b72fe !important;
      box-shadow: none !important;
    }
  }
}
.rate-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 84px;
  height: 84px;
  img {
    width: 32px;
    height: 32px;
  }
}
.robot-rate-cn {
  padding: 20px 0px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  
}
.radio-btn-cn {
  width: 100%;
  justify-content: space-evenly;
}
.el-radio-button__inner {
  border-radius: 4px !important;
  border: var(--el-border);
}
</style>
